<template>
  <div class="servAppList">
    <div class=" flex-start abc">
      <list type="big" tittle="应用列表">
        <table class="Datatable">
          <thead>
            <tr>
              <th>版本号</th>
              <th>app文件</th>
              <th>类型</th>
              <th>添加时间</th>
              <th>版本信息</th>
              <th>强制更新</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="tableDataAll.length != 0">
            <tr v-for="(item, index) in tableData" :key="index">
              <td>
                {{ item.appEdition }}
              </td>

              <td :title="item.fileName">{{ item.fileName }}</td>
              <td>{{ item.appType }}</td>
              <td>
                {{
                  item.addTime? setLocalTime( item.addTime): item.addTime
                }}
              </td>
              <!-- <el-tooltip
                class="item"
                effect="light"
                :content="item.people"
                placement="bottom"
              > -->
              <td
                @mouseenter="showtip(item.appId)"
                @mouseleave="tipindex = 0"
                class="tooltips"
              >
                <div class="text">{{ item.appInfo }}</div>
                <div v-if="item.appId === tipindex" class="tip">
                  <p>{{ item.appInfo }}</p>
                </div>
              </td>
              <td>{{ item.forceUpdate }}</td>
              <!-- </el-tooltip> -->

              <td>
                <span
                  class="ck cp download"
                  @click="
                    bianji(item)
                  "
                  >详情</span
                >

                <span class="ck cp delete" @click="del(item.appId)">删除</span>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="7">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <div class="flex-end fenye">
          <el-pagination
            v-if="tableDataAll.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </list>
      <list type="small" tittle="应用列表" right="right">
        <table class="smallTable">
          <tr>
            <td><span class="info">版本号</span></td>
            <td>
              <input
                class="searchInput banben"
                type="text"
                v-model="appEdition"
                placeholder="请输入版本号"
              />
            </td>
          </tr>
          <tr>
            <td></td>
            <td class="c-error">{{ errMsg }}</td>
          </tr>
          <tr>
            <td><span class="info"> 文件类型</span></td>
            <td>
              <el-select v-model="appType" placeholder="请选择">
                <el-option
                  v-for="item in appTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="gap"></td>
          </tr>
          <tr>
            <td><span class="info"> 强制更新</span></td>
            <td>
              <el-select v-model="forceUpdate" placeholder="请选择">
                <el-option
                  v-for="item in forceUpdateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="gap"></td>
          </tr>
          <tr>
            <td><span class="info"> 版本信息</span></td>
            <td>
              <el-input
                type="textarea"
                placeholder="请输入版本信息"
                v-model="appInfo"
                maxlength="200"
                show-word-limit
              >
              </el-input>
            </td>
          </tr>
          <tr>
            <td><span class="info">安装包</span></td>
            <td>
              <div class="package">
                <div class="border-top"></div>
                <div class="border-left"></div>
                <div class="border-bottom"></div>
                <div class="border-right"></div>

                <div class="button-wrapper"></div>
                <div
                  @dragover="fileDragover"
                  @drop="fileDrop"
                  class="upload flex-column flex-start"
                >
                  <input
                    type="file"
                    id="upload"
                    ref="upload"
                    @change="change"
                  />
                  <div class="pic">
                    <img
                      v-if="complete === false"
                      src="@/assets/upload.png"
                      alt=""
                    />
                    <img class="file" v-else src="@/assets/file.png" alt="" />
                    <img
                      v-if="complete === true"
                      @click="deleteFile"
                      class="close"
                      src="@/assets/closeFile.png"
                      alt=""
                    />
                  </div>

                  <div v-if="complete === false">
                    将安装包拖到此处这,或<span class="blue cp" @click="upload"
                      >点击上传</span
                    >
                  </div>
                  <div v-else>
                    {{ fileName }}
                  </div>
                  <div v-if="loading === true" class="loading-box">
                    <div
                      class="current-loading"
                      :style="{ width: percent + '%' }"
                    ></div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>

        <div class="bottom flex-start">
          <div class="btn-white2" @click="reset">重置</div>
          <div class="btn-blue2" @click="shelves">上架</div>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
import list from '../components/list'
import { upload } from '@/api/serviceManage'

export default {
  components: {
    list
  },
  data () {
    return {
      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false,
      visible: false,
      appInfo: '',
      tipindex: 0,
      total: 0,
      appType: 'IOS', // 文件类型
      appTypeOptions: [
        // 文件类型选择
        { label: 'IOS', value: 'IOS' },
        { label: 'Android', value: 'Android' }
      ],
      forceUpdate: '是', // 是否强制更新
      forceUpdateOptions: [{ label: '是' }, { label: '否' }],
      appEdition: null,
      // file: false,
      fileName: '',
      percent: 0,
      // uploadState: false, // 上传状态
      loading: false,
      complete: false,
      fileId: null,
      errMsg: ''
    }
  },
  created () {
    this.getinfo()
  },
  computed: {
    tableData () {
      return this.$store.state.serviceSetting.appList
    },
    tableDataAll () {
      return this.$store.state.serviceSetting.appList
    }
  },

  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$store
        .dispatch('serviceSetting/getAppListData', {
          page: this.currentPage - 1,
          size: this.size
        })
        .then(res => {}).catch(res => {
          this.$message({
            type: 'error',
            message: res,
            duration: 1000
          })
        })
    },
    handleSizeChange (size) {
      this.size = size
      this.$store
        .dispatch('serviceSetting/getAppListData', {
          page: this.currentPage - 1,
          size: this.size
        })
        .then(res => {}).catch(res => {
          this.$message({
            type: 'error',
            message: res,
            duration: 1000
          })
        })
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    },
    // checkedAll () {
    //   // console.log(this.checked)
    //   if (this.checked) {
    //     // 实现反选
    //     this.checkboxList = []
    //   } else {
    //     // 实现全选
    //     this.checkboxList = []
    //     this.tableData.forEach((item) => {
    //       this.checkboxList.push(item.id)
    //     })
    //   }
    // },

    bianji (item) {
      sessionStorage.setItem('appEdition', item.appEdition)
      sessionStorage.setItem('appInfo', item.appInfo)
      sessionStorage.setItem('fileId', item.fileId)
      sessionStorage.setItem('fileName', item.fileName)
      sessionStorage.setItem('appId', item.appId)
      sessionStorage.setItem('appType', item.appType)
      sessionStorage.setItem('forceUpdate', item.forceUpdate)
      this.$router.push('/serviceManage/appList/edit')
    },
    showtip (id) {
      this.tipindex = id
    },
    del (appId) {
      // console.log(appId)
      this.$store
        .dispatch('serviceSetting/deleteAppData', { appId })
        .then(res => {
          this.$message({
            type: 'success',
            message: res.message,
            duration: 1000
          })
          this.getinfo()
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: err,
            duration: 1000
          })
        })
    },
    upload () {
      this.$refs.upload.click()
      // // console.log(this.$refs.upload.value)
    },
    // 点击上传
    change () {
      const formData = new FormData()
      formData.append('file', this.$refs.upload.files[0])
      // console.log(this.$refs.upload.files[0])
      if (
        this.$refs.upload.files[0].type ===
        'application/vnd.android.package-archive'
      ) {
        upload
          .uploadFile(formData, progressEvent => {
            const completeVal =
              (progressEvent.loaded / progressEvent.total) * 100 || 0
            this.percent = completeVal
            this.loading = true
          })
          .then(res => {
            console.log(res)

            if (res.data.code === 200) {
              // console.log(res.data.data)
              this.fileId = res.data.data
              this.percent = 100
              this.loading = false
              this.complete = true
              this.fileName = this.$refs.upload.files[0].name
            } else {
              alert('上传失败')
              this.loading = false
              this.complete = false
              this.fileName = ''
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '只能上传apk文件',
          duration: 1000
        })
      }
    },
    deleteFile () {
      this.complete = false
      this.$refs.upload.value = ''
      this.fileId = null
    },
    fileDragover (e) {
      e.preventDefault()
    },
    // 拖拽上传
    fileDrop (e) {
      e.preventDefault()
      const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
      // console.log(file)

      if (!file) return
      if (file.type === 'application/vnd.android.package-archive') {
        const formData = new FormData()
        formData.append('file', file)
        // console.log(formData)
        upload
          .uploadFile(formData, progressEvent => {
            const completeVal =
              (progressEvent.loaded / progressEvent.total) * 100 || 0
            this.percent = completeVal
            // this.uploadState = false
            this.loading = true
          })
          .then(res => {
            // console.log(res)
            if (res.data.code === 200) {
              // console.log(res.data)
              this.fileId = res.data.data
              this.percent = 100
              // this.uploadState = true
              // this.filePath = res.data.resultBody.filePath
              this.loading = false
              this.complete = true
              this.fileName = file.name
            } else {
              this.$message({
                type: 'error',
                message: '上传失败',
                duration: 1000
              })
              this.loading = false
              this.complete = false
              this.fileName = ''
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '只能上传apk文件',
          duration: 1000
        })
      }
    },
    // 上架
    shelves () {
      if (this.appType === 'IOS') {
        if (this.appEdition !== null) {
          // console.log(this.appEdition, this.fileId, this.appInfo, this.appType, this.forceUpdate)
          this.$store
            .dispatch('serviceSetting/shelvesData', {
              appEdition: this.appEdition,
              fileId: Number(this.fileId),
              appInfo: this.appInfo,
              appType: this.appType,
              forceUpdate: this.forceUpdate
            })
            .then(res => {
              this.$message({
                type: 'success',
                message: res.message,
                duration: 1000
              })
              this.getinfo()
              this.reset()
            })
            .catch(res => {
              this.errMsg = res
            })
        } else {
          this.$message({
            type: 'error',
            message: '版本号不能为空',
            duration: 1000
          })
        }
      } else {
        if (this.appEdition !== null && this.fileId !== null) {
          // console.log(this.appEdition, this.fileId, this.appInfo, this.appType, this.forceUpdate)
          this.$store
            .dispatch('serviceSetting/shelvesData', {
              appEdition: this.appEdition,
              fileId: Number(this.fileId),
              appInfo: this.appInfo,
              appType: this.appType,
              forceUpdate: this.forceUpdate
            })
            .then(res => {
              this.$message({
                type: 'success',
                message: res.message,
                duration: 1000
              })
              this.getinfo()
              this.reset()
            })
            .catch(res => {
              this.errMsg = res
            })
        } else {
          this.$message({
            type: 'error',
            message: '版本号和安装包不能为空',
            duration: 1000
          })
        }
      }
    },
    // 重置
    reset () {
      this.errMsg = ''
      this.fileId = null
      this.appInfo = ''
      this.appEdition = null
      this.deleteFile()
    },
    getinfo () {
      this.$store
        .dispatch('serviceSetting/getAppListData', {
          page: this.currentPage - 1,
          size: this.size
        })
        .then(res => {
          // console.log(res)
          this.total = res.data.size
        }).catch(res => {
          this.$message({
            type: 'error',
            message: res,
            duration: 1000
          })
        })
    }
  },
  watch: {
    // 深度 watcher
    // checkboxList: {
    //   handler: function (val, oldVal) {
    //     if (this.checkboxList.length === this.tableData.length) {
    //       this.checked = true
    //     } else {
    //       this.checked = false
    //     }
    //   },
    //   deep: true
    // }
  }
}
</script>

<style lang="scss" scoped>
.servAppList {
  width: 100%;
  // min-height: 934px;
  height: 100%;
  .fenye {
    margin-bottom: 177px;
  }
  .abc {
    align-items: stretch;
  }
  table {
    margin-top: 20px;
    th,
    td {
      &:nth-child(1) {
        width: 60px;
      }
      &:nth-child(2) {
        width: 150px;
      }
      &:nth-child(3) {
        width: 84px;
      }
      &:nth-child(4) {
        width: 170px;
      }
      &:nth-child(5) {
        width: 277px;
      }
      &:nth-child(6) {
        width: 74px;
      }
      &:nth-child(7) {
        width: 240px;
      }
    }
  }
  .smallTable {
    table-layout: fixed;
    tr,
    td {
      &:nth-child(1) {
        width: 73px;
        text-align: center;
        vertical-align: top;
      }
      &:nth-child(2) {
        width: 330px;
        padding-left: 12px;
        text-align: left;
      }
      .info {
        display: block;
        width: 73px;
        height: 36px;
        color: #3d4966;
        line-height: 36px;
        text-align: right;
        white-space: nowrap;
      }
    }
    .c-error {
      height: 19px;
    }
    .banben {
      width: 330px;
      // height: 40px;
      // box-sizing: border-box;
      // opacity: 1;
      // background: #ffffff;
      // border: 1px solid #c6ccd7;
      // border-radius: 5px;
      // padding-left: 9px;
      // margin-bottom: 8px;
      // box-sizing: border-box;
      // margin-bottom: 30px;
    }
    /deep/ .el-textarea .el-textarea__inner {
      width: 330px;
      height: 164px;
      margin-top: 8px;
      margin-bottom: 20px;
      resize: none;
      outline: none;
      box-sizing: border-box;
    }
    /deep/ .el-textarea .el-input__count {
      z-index: 999;
      bottom: 30px;
      right: 30px;
      background: none;
    }
    /deep/ .el-select {
      width: 100%;
    }
    .package {
      // margin-top: 20px;
      position: relative;

      width: 327px;
      height: 227px;
      background: #ccc;
      z-index: 9999;
      border-radius: 5px;
      .border-top {
        width: calc(100% - 10px);
        left: 5px;
        height: 1px;
        background-image: linear-gradient(
          to right,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 20px 1px;
        background-repeat: repeat-x;
        position: absolute;
      }

      .border-left {
        width: 1px;
        left: 0;
        top: 5px;
        height: calc(100% - 10px);
        background-image: linear-gradient(
          to top,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 1px 20px;
        background-repeat: repeat-y;
        position: absolute;
      }

      .border-bottom {
        width: calc(100% - 10px);
        left: 5px;
        height: 1px;
        bottom: 0;
        background-image: linear-gradient(
          to right,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 20px 1px;
        background-repeat: repeat-x;
        position: absolute;
      }

      .border-right {
        width: 1px;
        right: 0;
        top: 5px;
        height: calc(100% - 10px);
        background-image: linear-gradient(
          to top,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 1px 20px;
        background-repeat: repeat-y;
        position: absolute;
      }
      .button-wrapper {
        position: relative;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        border-radius: 4px;
        background: #ffffff;
        top: 1px;
        left: 1px;
      }
      .upload {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .pic {
          width: 110px;
          height: 110px;
          position: relative;
          .close {
            position: absolute;
            width: 24px;
            height: 24px;
            right: -10px;
            top: -10px;
          }
          .file {
            background-color: #f2f4f8;
          }

          img {
            width: 100%;
          }
        }
      }
    }
    .gap {
      padding: 10px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 20px;
    .btn-white2 {
      margin-right: 20px;
      margin-left: 150px;
      width: 100px;
    }
    .btn-blue2 {
      width: 100px;
    }
  }
  #upload {
    display: none;
  }
  .loading-box {
    // margin-top: 15px;
    // float: left;
    width: 110px;
    height: 10px;
    background-color: #a5aebf;
    border-radius: 5px;
    // margin-left: 15px;

    .current-loading {
      height: 10px;
      border-radius: 5px;
      background-color: #304eec;
      /*width: 50%;*/
    }
  }
}
</style>
